<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue组件</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- <my-love></my-love>
        <my-love></my-love>
        <my-love></my-love> -->
        <!-- <first></first> -->
        <!-- <second></second> -->
        <template id="temp1">
            <h1>开发时候常用的方式创建组件</h1>
        </template>

    </div>
</body>
<script>
    // 1.定义组件
    //  var com = Vue.extend({
    //      template:'<h1>这是使用Vue方式创建的组件</h1>'
    //  })
    // 2.注册组件
    //  Vue.component('my-love',com)
    // 合并
    //  Vue.component('first',Vue.extend({
    //      template:'<h1>这是使用合并的方式创建的组件</h1>'
    //  }))
    // Vue.component('second',{
    //     template:'<h1>省略Vue.extend创建的组件</h1>'
    // })
    // 第四种组件
    Vue.component('second',{
        template:'#temp1'
    })
     var vm = new Vue({
         el:"#app",
         data:{

         },
         methods:{

         }
     })
</script>
</html>